<template>
  <!--   服务渠道管理 -->
  <div>
    <custom-container
      ref="customContainerRef"
      :config="mainConfig"
    ></custom-container>
    <setForm
      ref="setFormRef"
      v-model:open="open"
      v-model:title="title"
      v-model:isAdd="isAdd"
      @changeList="handleQuery"
    ></setForm>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, defineAsyncComponent, getCurrentInstance } from 'vue'
import {
  Plus,
  Edit,
  Delete,
  Search,
  Upload,
  Bottom,
  Key,
  UploadFilled,
} from '@element-plus/icons-vue'
import { ElButton, ElMessageBox, ElMessage, ElSwitch } from 'element-plus'
import { useI18n } from 'vue-i18n'
import usedicts, { DictDirection } from '@/store/modules/dicts'
import {
  addData,
  delData,
  getData,
} from '@/api/BusinessConfig/serviceChannel'

const dicts = usedicts()
const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const { t } = useI18n()

let // 选中数组 
  ids = [],
  // 新增状态
  open = ref(false),
  title = ref(''),
  isAdd = ref(false),
  // 非多个禁用
  multiple = ref(true),
  // 非单个禁用
  single = ref(true),

  // 查询
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  }),
  customContainerRef = ref(null),
  setFormRef = ref(null),
  {
    proxy,
  }:{
    proxy:any
  } = getCurrentInstance()

// 多选
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  ids = rows.map((item) => item.id)
  single.value = rows.length != 1
  multiple.value = !rows.length
}
// 新增
const handelAdd = () => {
  title.value = '新增发货人'
  open.value = true
  isAdd.value = true
}

// 修改
const handleUpdate = (row: { [key: string]: any }) => {
  open.value = true
  isAdd.value = false
  title.value = '修改发货人'
  let id = row.id || ids
  id instanceof Array && (id = id[0])
  setFormRef.value.getList(id)
}
// 删除
const handleDelete = (row: { [key: string]: any }) => {
  const id = row?.id || ids
  ElMessageBox.confirm(`"此操作将永久删除"${ id }"项数据, 是否继续"?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => delData(id))
  .then((res) => {
    if (res.code == 200) {
      ElMessage.success('删除成功')
      handleQuery()
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch(error => {
    if (error == 'cancel') {
      ElMessage.info('取消删除')
    }
  })
}
const handleQuery = () => {
  customContainerRef.value.getList()
}
const mainConfig = computed(() => {
  const queryField = 'BusinessConfiguration.serviceChannelManagement.queryField.'
  const btns = 'BusinessConfiguration.serviceChannelManagement.btns.'
  const columns = 'BusinessConfiguration.serviceChannelManagement.columns.'
  return {
    query: {
      fields: [
        {
          label: t(`${ queryField }serviceChannelCode`),
          prop: 'serviceChannelCode',
          option: {
            placeholder: '请输入服务渠道代码',
        
          },
        },
        {
          label: t(`${ queryField }channelChName`),
          prop: 'channelChName',
          option: {
            placeholder: '请输入渠道中文名称',
          },
        },
        {
          label: t(`${ queryField }status`),
          type: 'select',
          prop: 'status',
          option: {
            dictInfo: { dict: DictDirection.通用状态 },
          },
        },
      ],
      queryParams: queryParams.value,
      formOption: {
        labelWidth: '100px',
      },
    },
    btns: [
      {
        title: t(`${ btns }add`),
        type: 'primary',
        onClick: handelAdd,
      },
      {
        title: t(`${ btns }edit`),
        type: 'success',
      
        disabled: single.value,
        onClick: handleUpdate,
      },
      {
        title: t(`${ btns }del`),
        type: 'danger',
        disabled: multiple.value,
        onClick: handleDelete,
      },
    ],
    table: {
      columns: [
        { type: 'selection', width: '55', align: 'center' },
        {
          label: t(`${ columns }serviceProviderId`),
          prop: 'serviceProviderId',
          align: 'center',
          width: '180',
        },
        {
          label: t(`${ columns }serviceChannelCode`),
          prop: 'serviceChannelCode',
          align: 'center',
          width: '180',
        },
        {
          label: t(`${ columns }status`),
          prop: 'status',
          align: 'center',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.通用状态, value: row.status }),
        },
        {
          label: t(`${ columns }channelChName`),
          prop: 'channelChName',
          align: 'center',
        },
        {
          label: t(`${ columns }channelEnName`),
          prop: 'channelEnName',
          align: 'center',
        },
        {
          label: t(`${ columns }weightRule`),
          prop: 'weightRule',
          align: 'center',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.计重规则, value: row.weightRule }),
        },
        {
          label: t(`${ columns }volumeCoefficient`),
          prop: 'volumeCoefficient',
          align: 'center',
        },

        {
          label: t(`${ columns }volumeFactor`),
          prop: 'volumeFactor',
          align: 'center',
        },

        {
          label: t(`${ columns }tariffAmountLimit`),
          prop: 'tariffAmountLimit',
          align: 'center',
          width: '150',
        },
        {
          label: t(`${ columns }tariffWeightLimit`),
          prop: 'tariffWeightLimit',
          align: 'center',
          width: '150',
        },
        {
          label: t(`${ columns }printCode`),
          prop: 'printCode',
          align: 'center',
        },

        {
          label: t(`${ columns }productGroup`),
          prop: 'productGroup',
          align: 'center',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.产品组, value: row.productGroup }),
        },

        {
          label: t(`${ columns }collectionCurrency`),
          prop: 'collectionCurrency',
          align: 'center',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.收款币种, value: row.collectionCurrency }),
        },
        {
          label: t(`${ columns }productType`),
          prop: 'productType',
          align: 'center',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.产品类别, value: row.productType }),
        },
        {
          label: t(`${ columns }invoiceCode`),
          prop: 'invoiceCode',
          align: 'center',
        },
        {
          label: t(`${ columns }operation`),
          align: 'center',
          width: '200',
          fixed: 'right',
          showOverflowTooltip: false,
          className: 'custormFixedCol',
          render: (h, params) => {
            const buttons = [
              {
                title: t(`${ btns }edit`),
                clickFun: handleUpdate,
              },
              {
                title: t(`${ btns }del`),
                clickFun: handleDelete,
              },
            ]
            return buttons.map((el) => h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  el.clickFun(params.row)
                },
              },
              {
                default: () => el.title,
              },
            ))
          },
        },
      ],
      event: {
        onSelectionChange: (rows) => {
          handleTableSelect(rows)
        },
      },
    },
    api: getData,
    customKey: 'BusinessConfiguration/serviceChannelManagement',
  }
})
</script>